<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    /*
        * createApp():创建一个应用实例
        * 详细信息:
            第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。
        * 示例:
            可以直接内联根组件
            import { createApp } from 'vue'
              const app = createApp({
                 //root component options
              })

            也可以使用从别处导入的组件：
                import { createApp } from 'vue'
                import App from './App.vue'
                const app = createApp(App)
    */

/*
     app.mount():将应用实例挂载在一个容器元素中。
      类型:
        interface App {
          mount(rootContainer: Element | string): ComponentPublicInstance
        }
      详细信息:
        参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。
        如果该组件有模板或定义了渲染函数，它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下，容器元素的 innerHTML 将被用作模板。
        在 SSR 激活模式下，它将激活容器内现有的 DOM 节点。如果出现了激活不匹配，那么现有的 DOM 节点将会被修改以匹配客户端的实际渲染结果。
        对于每个应用实例，mount() 仅能调用一次
 */
    const app = Vue.createApp({
        template: `
          <h1>{{ message }}</h1>
        `,
        data() {
            return {
                message: "helloVue3"
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
